<template>
  <div class='warpper'>
    <van-swipe @change='onChange'>
      <van-swipe-item v-for='(item,index) in product.sliderImageArr' :key='index'>
        <van-image :src='imgUrls+item' fit='scale-down' width='100%' />
      </van-swipe-item>
      <template #indicator>
        <div v-if='product.sliderImageArr' class='custom-indicator'>
          {{ current + 1 }}/{{ product.sliderImageArr.length }}
        </div>
      </template>
    </van-swipe>
    <!-- 详情图end -->
    <van-row>
      <van-col class='detail' span='24'>
        <font v-if="integral=='true'" color='#ED6A0C' size='4'>{{ product.integral }}积分</font>
        <template v-else>
          <font color='#ED6A0C' size='4'>￥</font>
          <font color='#ED6A0C' size='6'>{{ product.price }}</font>
        </template>
        <div style='float: right;text-align: center;margin-right: 5px;color: #909399;'>
          {{ product.sales }}<br />
          <span>销量</span>
        </div>
        <div style='float: right;text-align: center;margin-right: 5px;color: #909399;'>
          {{ product.browse }}<br />
          <span>浏览</span>
        </div>
        <div>
          <p>
            {{ product.storeInfo }}  
            <van-icon style="float:right;margin-right: 7%;" @click="share" size="20" name="share-o" />
          </p>
          
        </div>
      </van-col>


      <van-col class='detail' span='24'>
        <!-- <van-cell title="选择规格：" value="内容" label="描述信息" /> -->
        <van-cell :value='skuValue' is-link @click='show=true'>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class='custom-title'>选择规格：</span>
          </template>
        </van-cell>
        <van-sku v-model='show' :goods='goods' :hide-stock='sku.hide_stock' :sku='sku'
                 @sku-selected='onByselect' @buy-clicked='onBuyClicked' @add-cart='onAddCartClicked'>
          <template #sku-header-price='props'>
            <div class='van-sku__goods-price' @click='test(props)'>
              <span v-if="integral=='true'" class='van-sku__price-symbol'>积分</span>
              <span v-if="integral=='true'&&props.selectedSkuComb" class='van-sku__price-num'>{{
                  props.selectedSkuComb.integral }}</span>
              <span v-if="integral=='true'&&props.selectedSkuComb==null" class='van-sku__price-num'>{{
                  props.price }}</span>
              <span v-if="integral=='false'" class='van-sku__price-symbol'>￥</span>
              <span v-if="integral=='false'" class='van-sku__price-num'>{{ props.price }}</span>
            </div>
          </template>
          <template #sku-actions='props'>
            <div v-if="integral=='true'" class='van-sku-actions'>
              <van-button size='large' square type='warning' @click="props.skuEventBus.$emit('sku:buy')">
                积分兑换
              </van-button>
            </div>
          </template>
        </van-sku>
      </van-col>
      <van-col class='detail' span='24'>
        <van-cell value='图文详情:' />
        <div class='disc' v-html='$options.filters.chageUrl(product.description,imgUrls)'></div>
      </van-col>
      <!-- 评论 -->
      <van-col class='detail' span='24'>
        <van-cell>
          <template #title>
            <span class='custom-title'> <van-icon name="comment-o" />评价({{ReviewConfig.sumCount}})</span>
            <span @click='getReview' class='review-right'>{{ReviewConfig.replyChance}}% 好评率 <van-icon name="arrow" /></span>
          </template>
        </van-cell>
      </van-col>
      <!-- 评论end -->
    </van-row>
    <!-- 商品信息end -->
    <van-goods-action>
      <van-goods-action-icon icon='cart-o' text='购物车' to='/cart' />
      <van-goods-action-icon v-if='!product.userCollect' icon='star-o' text='收藏' @click='collect' />
      <van-goods-action-icon v-if='product.userCollect' color='#ff5000' icon='star' text='已收藏' @click='collect' />
      <van-goods-action-button v-if="integral=='false'" text='加入购物车' type='warning' @click='show=true' />
      <van-goods-action-button v-if="integral=='false'" text='立即购买' type='danger' @click='show=true' />
      <van-goods-action-button v-if="integral=='true'" text='立即兑换' type='danger' @click='show=true' />
    </van-goods-action>
  </div>
</template>

<script>
import {
  parseTime
} from '../../utils/index.js'
import {
  getProduct
} from '@/api/product.js'
import {
  addCart
} from '@/api/cart.js'
import { collect, delCollect } from '../../api/collect'
import { getReview, getReviewConfig } from 'api/review'
export default {
  data() {
    return {
      isCollect: false,
      replyCount: 0, //评论条数
      reply: {},
      current: 0,
      limit: 0, //条数
      integral: 'false', //是否为积分
      showList: false,
      skuValue: '',
      product: {}, //商品信息
      chosenCoupon: -1,
      show: false,
      sku: {
        // 数据结构见下方文档
        tree: [],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [],
        price: '1.00', // 默认价格（单位元）
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://img01.yzcdn.cn/1.jpg'
      },
      imgUrls: this.$baseApi,
      couponsList: [{
        available: '',
        value: '',
        name: '',
        startAt: '1489104000',
        endAt: ''
      }],
      ReviewConfig:{},
      productId :''
    }
  },
  created() {
    this.index()
    if (this.$route.query.integral) {
      this.integral = this.$route.query.integral
    }
    this.getReviewConfig(this.$route.query.id)
  },
  filters: {
    chageUrl: function(data, url) {
      if (data) {
        var a = data
        var vm = this
        var b = /<img [^>]*src=['"]([^'"]+)[^>]*>/g
        var s = a.match(b)
      }
      if (s != null) {
        for (var i = 0; i < s.length; i++) {
          var srcImg = s[i].replace(b, '$1').replace(/\s+/g, '')
          a = a.replace(new RegExp(srcImg, 'g'), url + srcImg)
        }
      }
      return a
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    index() {
      getProduct(this.$route.query.id).then(res => {
        if (res.status == 200) {
          this.product = res.data.storeInfo //商品信息
          this.reply = res.data.reply //商品评论
          this.replyCount = res.data.replyCount
          if (this.integral == 'true') {
            this.sku.price = res.data.storeInfo.integral
          } else {
            this.sku.price = res.data.storeInfo.price
          }
          this.sku.stock_num = res.data.storeInfo.stock
          this.goods.picture = this.imgUrls + res.data.storeInfo.image
          res.data.productAttr.forEach((item, index) => {
            let treeMap = {
              v: []
            }
            treeMap.k = item.attrName
            treeMap.k_s = item.attrName

            item.attrValueArr.forEach((att, i) => {
              let v = {}
              v.id = att
              v.name = att
              treeMap.v.push(v)
            })
            this.sku.tree.push(treeMap)
          })
          for (let value in res.data.productValue) {
            let list = {}
            list.id = res.data.productValue[value].unique
            let sk = res.data.productValue[value].sku.split(',')
            for (let values in res.data.productValue) {
              this.sku.tree.forEach((r, i) => {
                list[r.k_s] = sk[i]
              })
            }
            list.price = res.data.productValue[value].price * 100
            list.integral = res.data.productValue[value].integral
            list.stock_num = res.data.productValue[value].stock
            this.sku.list.push(list)
          }
        }
      })
      if (this.$route.query.integral == true) {
        this.$route.meta.title = '积分商品兑换'
        this.integral = 'true'
      } else {
        this.$route.meta.title = '商品详情'
        this.integral = 'false'
      }
    },
    parseTime,
    onBuyClicked(data) {
      addCart({
        cartNum: data.selectedNum,
        productId: this.$route.query.id,
        uniqueId: data.selectedSkuComb.id,
        new: 0
      }).then(res => {
        if (res.status == 200) {
          if (this.integral == 'true') {
            this.$router.push({
              name: 'CreationOrder',
              query: {
                ids: res.data.cartId,
                integral: 1
              }
            })
          } else {
            this.$router.push({
              name: 'CreationOrder',
              query: {
                ids: res.data.cartId,
                integral: 0
              }
            })
          }
        }
      })
    },
    onByselect(skuValue) {
      let list = ''
      this.sku.tree.forEach(res => {
        for (let value in skuValue.selectedSkuComb) {
          if (res.k == value) {
            list = list + skuValue.selectedSkuComb[value]
          }
        }
      })
      this.skuValue = list
    },
    onAddCartClicked(data) {
      addCart({
        cartNum: data.selectedNum,
        productId: this.$route.query.id,
        uniqueId: data.selectedSkuComb.id,
        new: 0
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('加入购物车成功！')
          this.show = false
        }
      })
    },
    collect() {
      if (this.product.userCollect) {
        delCollect({
          category: 'collect',
          id: this.$route.query.id
        }).then(res => {
          if (res.status == 200) {
            this.product.userCollect = false
          }
        })
      } else {
        collect({
          category: 'collect',
          id: this.$route.query.id
        }).then(res => {
          if (res.status == 200) {
            this.$toast.success('收藏成功')
            this.product.userCollect = true
          }
        })
      }

    },
    getReview(){
      this.$router.push('/reviewDetail')
    },
    getReviewConfig(data){
      getReviewConfig(data).then(res =>{
        this.productId = data
        this.ReviewConfig = res.data

      })
    },
    share(){
      this.$router.push({
        path: 'share',
        query: {
          id: this.$route.query.id
        }
      })
    }
  },
  beforeDestroy() {
    this.$Bus.$emit("productId",this.productId)
  }
}
</script>

<style scoped>
.disc {
  width: calc(100% - 30px);
  margin: 0 auto;
}

.disc /deep/ img {
  width: 100%;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: #FFFFFF;
}

.warpper {
  background-color: #F8F8F8;
  padding: 8px;
}

.img {
  width: 60px;
  height: 60px;
  margin: 10px;
}

.detail {
  margin-top: 10px;
  background-color: #FFFFFF;
  padding: 6px;
  border-radius: 8px;
}

.custom-title {
  margin: 8px;
}
.review-right{
  float: right;
  color: #ff4444;
}
</style>
